<mat-card>Employees</mat-card>
<div class="content">
  <mat-progress-spinner *ngIf="!areLoaded" mode="indeterminate">
  </mat-progress-spinner>
  <div *ngIf="areLoaded">
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Index </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.firstName}} {{row.lastName}}</td>
      </ng-container>

      <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef> Role </th>
        <td mat-cell *matCellDef="let row"> {{row.role}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['id', 'name', 'role']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['id', 'name', 'role']" (click)="fetchEmployee(row.id)"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    <button mat-raised-button (click)="addEmployee()">Add employee</button>
  </div>
</div>
